import React from 'react';
import { obj_str, is_empty } from 'sui';

/* data = [{
 *  des: "xx",
 *  value: "xx",
 *  end: "xx",
 *  ext: "xx",
 * }]
*/
const InfoList = ({ tool=null, data, hcmd, cur=null, hcur, className, bd=null }) => {
    if (is_empty(data)) {
        return null;
    }

    const get_value = (d) => {
        if (!d.value) {
            return "";
        }

        if (!d.t) {
            return d.value;
        }

        if (d.t === "cmd") {
            return d.hcmd();
        }
        else if (d.t === "%") {
            if (is_empty(d.value)) {
                return "";
            }

            return d.value + "%";
        }
    };

    const item = data.map((d, i) => {
        let st = d.uid === cur ? " text-indigo-600" : "";
        if (bd) {
            st += ` ${bd}`;
        }

        return (
            <div className="table-row" key={`lst${i}`}>
                <div className={"py-1 text-right table-cell" + st}>{obj_str(d, "des")}</div>
                <div className={"px-6 py-1 table-cell" + st}>{get_value(d)}</div>
                <div className={"py-1 table-cell" + st}>{obj_str(d, "end")}</div>
                <div className={"py-1 pl-6 table-cell" + st}>{obj_str(d, "ext")}</div>
            </div>
        );
    });

    return (
        <div className={className}>
            {tool}
            <div className="my-2 table">
                {item}
            </div>
        </div>
    );
};

export {InfoList};
